<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
<script >
function xianshi(){
    //切换添加表单
var display=document.getElementById("add");
    if(display.style.display=="block"){
        display.style.display="none";
    }else{
        display.style.display="block";
    }
    
    
}
function add(){
    var mytab=document.getElementById("table");
    //获取用户信息
var no=parseInt(document.getElementById("index").value);
var name=document.getElementById("name").value;
var iname=document.getElementById("iname").value;

    //插入表格
var tabRow;
     for(var i=1;i<mytab.rows.length;i++){
        var num=parseInt(mytab.rows[i].cells[0].innerText);
        //alert(index+""+i );
        //如果当前的表单中编号和输入的编号有重复提示用户，并返回不添加
        if(num==no){
            alert("编号重复");
            return false;
        }
        //输入的编号小于当前遍历的某个编号是，插入当前位置
         if(num>no){
             
          tabRow=mytab.insertRow(i);//如果已有的编号大于输入编号，插入到当前行
         
         tabRow.insertCell(0).innerHTML=no;
        tabRow.insertCell(1).innerHTML=name;
        tabRow.insertCell(2).innerHTML=iname;
        tabRow.insertCell(3).innerHTML="<a href='#' onclick=del("
        +no+")>删除</a>||<a onclick=alter("+no+") href='#'>修改</a>";
             return;
             
        }
    } 
    
    //要插入的行
    tabRow=mytab.insertRow(mytab.rows.length);
        
    //插入行的列
    tabRow.insertCell(0).innerHTML=no;
    tabRow.insertCell(1).innerHTML=name;
    tabRow.insertCell(2).innerHTML=iname;
    tabRow.insertCell(3).innerHTML="<a href='#' onclick=del("
    +no+")>删除</a>||<a onclick=alter("+no+") href='#'>修改</a>";
}
function del(no){
var mytab=document.getElementById("table");
    
    for(var i=1;i<mytab.rows.length;i++){//遍历每一行取出编号
    var num=parseInt(mytab.rows[i].cells[0].innerText);
        if(num==no){//如果遍历的编号等于输入的编号，就删除当前行
            mytab.deleteRow(i);
        }
    }
    
    
}

function alter(no){

    //提示用户输入要修改的列数
    var a=window.prompt("请输入要修改的列数");
        a--;
        
        //如果输入的列数等于第一列，那目前提示用户，不能修改编号
        if(a==0){
            alert("不能修改英雄的编号");
            return;
        }
        var mytab=document.getElementById("table");
        for(var i=1;i<mytab.rows.length;i++){//遍历每一行
            var num=parseInt(mytab.rows[i].cells[0].innerText);//取出每一行的编号
                if(num==no){//如果遍历的编号等于函数传进来的编号，修改该行
                    if(a<mytab.rows[i].cells.length-1){
                        var cellText=mytab.rows[i].cells[a].innerText;
                    mytab.rows[i].cells[a].innerHTML="<input onblur=blur1(this,"+i+","+a+") type='text' value="
                    +cellText+" style='width:64px'  />";
                    }
                }
            }
            
    
        
    
    
    
}

function blur1(obj,i,a){
    document.getElementById("table").rows[i].cells[a].innerText=obj.value;
}
</script>
</head>
<body>
    <table id="table" border="1" style="align:center;width:300px;">
        <tr align="center"><td>编号</td><td>名字</td><td>外号</td><td>操作</td></tr>
        <!-- <tr ><td>1</td><td>宋江</td><td>及时雨</td><td><a href="#">删除</a>||<a href="#">修改</a></td></tr>
        <tr ><td>2</td><td>吴用</td><td>吴大哥</td><td><a href="#">删除</a>||<a href="#">修改</a></td></tr>
        <tr ><td>8</td><td>吴用</td><td>吴大哥</td><td><a href="#">删除</a>||<a href="#">修改</a></td></tr> -->
    </table>
    <button onclick="xianshi()">添加/隐藏</button>
    
    <table id="add" style="display:none">
        <caption style="font-size:26px;">添加英雄人物</caption>
        <tr><td>编号:<input type="text" id="index"name="index"/></td></tr>
        <tr><td>姓名:<input type="text" id="name" name="name"/></td></tr>
        <tr><td>外号:<input type="text" id="iname" name="iname"/></td></tr>
        <tr><td><input type="submit" value="添加英雄" onclick="add()"/></td></tr>
    </table>
    
    
</body>
</html>

